85:I[903690,["/chat-static/_next/static/immutable/chunks/0f7vmp09w0w3_.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l1ze4wl3hwyo.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/1-wzazpj6wxjv.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/1coue_ozvgza6.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3twuepbj0sa46.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/0lqecjmpjs03d.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/2n7jko15fxnc8.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/309um4vobmrg1.js","/chat-static/_next/static/immutable/chunks/0lpzz48chq3z_.js","/chat-static/_next/static/immutable/chunks/0esh3_fydqhs4.js","/chat-static/_next/static/immutable/chunks/0fqzt-x_byqxq.js","/chat-static/_next/static/immutable/chunks/31ksuowt-h8kz.js","/chat-static/_next/static/immutable/chunks/3vib52bi7ylnf.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/313gqxshd-pvz.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2bf3kb-va9_w_.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/3dhcra7d70kox.js","/chat-static/_next/static/immutable/chunks/3bd2e1qm07sst.js","/chat-static/_next/static/immutable/chunks/1a66wkxyahiky.js","/chat-static/_next/static/immutable/chunks/0yhvouprkh27j.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/29x8k6m14yofx.js"],"ExplicitChatIdProvider"] 86:I[838238,["/chat-static/_next/static/immutable/chunks/0f7vmp09w0w3_.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l1ze4wl3hwyo.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/1-wzazpj6wxjv.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/1coue_ozvgza6.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3twuepbj0sa46.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/0lqecjmpjs03d.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/2n7jko15fxnc8.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/309um4vobmrg1.js","/chat-static/_next/static/immutable/chunks/0lpzz48chq3z_.js","/chat-static/_next/static/immutable/chunks/0esh3_fydqhs4.js","/chat-static/_next/static/immutable/chunks/0fqzt-x_byqxq.js","/chat-static/_next/static/immutable/chunks/31ksuowt-h8kz.js","/chat-static/_next/static/immutable/chunks/3vib52bi7ylnf.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/313gqxshd-pvz.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2bf3kb-va9_w_.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/3dhcra7d70kox.js","/chat-static/_next/static/immutable/chunks/3bd2e1qm07sst.js","/chat-static/_next/static/immutable/chunks/1a66wkxyahiky.js","/chat-static/_next/static/immutable/chunks/0yhvouprkh27j.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/29x8k6m14yofx.js"],"SWRDataProvider"] 87:Tee0a,[V0_FILE]typescriptreact:file="app/page.tsx" import TaskSphere from "./components/TaskSphere" export default function Home() { return } [V0_FILE]typescriptreact:file="app/components/TaskList.tsx" 'use client' import { useState, useEffect } from 'react' import TaskItem from './TaskItem' interface Task { id: number title: string completed: boolean } export default function TaskList() { const [tasks, setTasks] = useState([]) useEffect(() => { // In a real application, you would fetch tasks from an API here setTasks([ { id: 1, title: 'Complete project proposal', completed: false }, { id: 2, title: 'Review code changes', completed: true }, { id: 3, title: 'Update documentation', completed: false }, ]) }, []) const toggleTask = (id: number) => { setTasks(tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task )) } return (

))}

) } [V0_FILE]typescriptreact:file="app/components/TaskItem.tsx" "use client" import { useState } from "react" import { motion } from "framer-motion" import { CheckCircle2, Circle, Trash2, Clock } from "lucide-react" import { formatDistanceToNow } from "date-fns" import { cn } from "@/lib/utils" interface Task { id: string title: string completed: boolean category: string createdAt: Date } interface TaskItemProps { task: Task onToggle: (id: string) => void onDelete: (id: string) => void categoryColor: string } export default function TaskItem({ task, onToggle, onDelete, categoryColor }: TaskItemProps) { const [isHovered, setIsHovered] = useState(false) return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{task.title}

{formatDistanceToNow(task.createdAt, { addSuffix: true })}

onDelete(task.id)} className="text-gray-400 hover:text-red-500 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 rounded-full p-1" aria-label="Delete task" > ) } [V0_FILE]typescriptreact:file="app/components/AddTaskForm.tsx" 'use client' import { useState } from 'react' import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" export default function AddTaskForm() { const [title, setTitle] = useState('') const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // In a real application, you would add the task to your state or send it to an API console.log('Adding task:', title) setTitle('') } return ( ) } [V0_FILE]typescriptreact:file="app/components/TaskFilter.tsx" 'use client' import { useState } from 'react' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function TaskFilter() { const [filter, setFilter] = useState('all') const handleFilterChange = (value: string) => { setFilter(value) // In a real application, you would filter the tasks based on this value console.log('Filter changed to:', value) } return ( ) } [V0_FILE]typescriptreact:file="app/components/TaskDashboard.tsx" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Sun, Moon, Plus, CheckCircle2, Filter } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Progress } from "@/components/ui/progress" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { useToast } from "@/components/ui/use-toast" import { Toaster } from "@/components/ui/toaster" import TaskItem from "./TaskItem" import { cn } from "@/lib/utils" // Define task categories with colors const categories = [ { id: "work", name: "Work", color: "bg-blue-500" }, { id: "personal", name: "Personal", color: "bg-green-500" }, { id: "health", name: "Health", color: "bg-red-500" }, { id: "learning", name: "Learning", color: "bg-purple-500" }, { id: "other", name: "Other", color: "bg-gray-500" }, ] interface Task { id: string title: string completed: boolean category: string createdAt: Date } export default function TaskDashboard() { const [tasks, setTasks] = useState([]) const [newTaskTitle, setNewTaskTitle] = useState("") const [selectedCategory, setSelectedCategory] = useState("work") const [filter, setFilter] = useState("all") const [darkMode, setDarkMode] = useState(false) const { toast } = useToast() // Load tasks from localStorage on component mount useEffect(() => { const savedTasks = localStorage.getItem("tasks") if (savedTasks) { try { const parsedTasks = JSON.parse(savedTasks) // Convert string dates back to Date objects parsedTasks.forEach((task: any) => { task.createdAt = new Date(task.createdAt) }) setTasks(parsedTasks) } catch (e) { console.error("Error parsing tasks from localStorage", e) } } }, []) // Save tasks to localStorage whenever they change useEffect(() => { localStorage.setItem("tasks", JSON.stringify(tasks)) }, [tasks]) // Toggle dark mode useEffect(() => { if (darkMode) { document.documentElement.classList.add("dark") } else { document.documentElement.classList.remove("dark") } }, [darkMode]) const addTask = () => { if (newTaskTitle.trim() === "") return const newTask: Task = { id: Date.now().toString(), title: newTaskTitle, completed: false, category: selectedCategory, createdAt: new Date(), } setTasks([...tasks, newTask]) setNewTaskTitle("") toast({ title: "Task added!", description: `"${newTaskTitle}" has been added to your tasks.`, }) } const toggleTask = (id: string) => { const updatedTasks = tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task)) setTasks(updatedTasks) const task = tasks.find((t) => t.id === id) if (task) { toast({ title: task.completed ? "Task reopened" : "Task completed!", description: `"${task.title}" is now ${task.completed ? "active" : "completed"}.`, }) } } const deleteTask = (id: string) => { const task = tasks.find((t) => t.id === id) setTasks(tasks.filter((task) => task.id !== id)) if (task) { toast({ title: "Task deleted", description: `"${task.title}" has been removed.`, variant: "destructive", }) } } const filteredTasks = tasks.filter((task) => { if (filter === "all") return true if (filter === "active") return !task.completed if (filter === "completed") return task.completed return true }) const completedCount = tasks.filter((task) => task.completed).length const progress = tasks.length > 0 ? (completedCount / tasks.length) * 100 : 0 return (

✨ Task Master

Progress

{completedCount} of {tasks.length} tasks completed ({Math.round(progress)}%)

Add New Task

setNewTaskTitle(e.target.value)} placeholder="What needs to be done?" className="flex-grow" onKeyDown={(e) => e.key === "Enter" && addTask()} /> {categories.map((category) => ( setSelectedCategory(category.id)}>

{category.name} ))}

My Tasks

setFilter("all")}>All Tasks setFilter("active")}>Active Tasks setFilter("completed")}>Completed Tasks

setFilter("all")}> All setFilter("active")}> Active setFilter("completed")}> Completed {filteredTasks.length > 0 ? (

c.id === task.category)?.color || "bg-gray-500"} /> ))}

) : (

No tasks found

{filter === "all" ? "Add a new task to get started!" : filter === "active" ? "No active tasks. Great job!" : "No completed tasks yet."}

)}

) } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function getRandomInt(min: number, max: number) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } export function calculateTaskPosition(index: number, total: number, radius: number) { // Calculate the angle for this task const angle = (index / total) * Math.PI * 2 // Calculate the position on the circle const x = Math.cos(angle) * radius const z = Math.sin(angle) * radius // Calculate a slight y-offset based on the index to create a spiral effect const y = ((index % 3) - 1) * 30 return { x, y, z, angle } } export function getEnergyColor(energy: number) { // Red for low energy, yellow for medium, green for high if (energy < 33) return "from-red-500 to-red-600" if (energy < 66) return "from-yellow-500 to-yellow-600" return "from-green-500 to-green-600" } export function getTaskSuggestion(energy: number) { if (energy < 33) { return { message: "Your energy is low. Consider these low-energy tasks:", tasks: ["Review documents", "Organize files", "Reply to emails", "Plan your week"], } } else if (energy < 66) { return { message: "You have moderate energy. Good tasks might be:", tasks: ["Team meetings", "Writing reports", "Learning new skills", "Problem solving"], } } else { return { message: "Your energy is high! Great time for challenging tasks:", tasks: ["Creative work", "Complex problem solving", "Important decisions", "Starting new projects"], } } } export function generateAchievement(completedCount: number) { const achievements = [ { threshold: 1, title: "First Step", description: "Completed your first task" }, { threshold: 5, title: "Getting Started", description: "Completed 5 tasks" }, { threshold: 10, title: "Momentum Builder", description: "Completed 10 tasks" }, { threshold: 25, title: "Productivity Master", description: "Completed 25 tasks" }, { threshold: 50, title: "Task Conqueror", description: "Completed 50 tasks" }, { threshold: 100, title: "Centurion", description: "Completed 100 tasks" }, ] // Find the highest achievement unlocked for (let i = achievements.length - 1; i >= 0; i--) { if (completedCount >= achievements[i].threshold) { return achievements[i] } } return null } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "TaskSphere - Reimagined Task Management", description: "A revolutionary approach to managing your tasks and boosting productivity", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 217 91% 60%; --primary-foreground: 0 0% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; --radius: 0.75rem; } .light { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 217 91% 60%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .task-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .energy-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: white; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .energy-slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: white; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .glow { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); } .task-sphere { perspective: 1000px; } .task-orbit { transform-style: preserve-3d; animation: rotate 60s infinite linear; } @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .task-planet { transform-style: preserve-3d; position: absolute; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .confetti { position: absolute; width: 10px; height: 10px; background-color: #f00; border-radius: 50%; } [V0_FILE]typescriptreact:file="app/components/TaskCard.tsx" "use client" import { useState } from "react" import { motion } from "framer-motion" import { CheckCircle, Circle, Trash2, Clock } from "lucide-react" import { formatDistanceToNow } from "date-fns" import { cn, getEnergyColor } from "@/lib/utils" interface Task { id: string title: string completed: boolean energy: number timeBlock: string createdAt: Date } interface TaskCardProps { task: Task onToggle: (id: string) => void onDelete: (id: string) => void } export default function TaskCard({ task, onToggle, onDelete }: TaskCardProps) { const [isHovered, setIsHovered] = useState(false) const energyColor = getEnergyColor(task.energy) return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{task.title}

{formatDistanceToNow(task.createdAt, { addSuffix: true })}

Energy Level {localEnergy}%

Low Energy High Energy

) } [V0_FILE]typescriptreact:file="app/components/TaskPlanet.tsx" "use client" import { useState } from "react" import { motion } from "framer-motion" import { CheckCircle, Trash2 } from "lucide-react" import { getEnergyColor } from "@/lib/utils" interface Task { id: string title: string completed: boolean energy: number timeBlock: string createdAt: Date position?: { x: number; y: number; z: number; angle: number } } interface TaskPlanetProps { task: Task onToggle: (id: string) => void onDelete: (id: string) => void } export default function TaskPlanet({ task, onToggle, onDelete }: TaskPlanetProps) { const [isHovered, setIsHovered] = useState(false) const energyColor = getEnergyColor(task.energy) if (!task.position) return null const { x, y, z } = task.position const scale = task.completed ? 0.8 : 1 const opacity = task.completed ? 0.6 : 1 // Calculate size based on energy level (higher energy = larger planet) const size = 40 + task.energy / 10 return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

onToggle(task.id)} > {task.completed && } {isHovered && (

{task.title}

{task.completed ? "Completed" : "Active"}

)}

) } [V0_FILE]typescriptreact:file="app/components/AchievementBadge.tsx" "use client" import { motion } from "framer-motion" import { Award, Star } from "lucide-react" interface AchievementBadgeProps { title: string description: string } export default function AchievementBadge({ title, description }: AchievementBadgeProps) { return (

{Array.from({ length: 12 }).map((_, i) => ( ))}

{title} {description}

) } [V0_FILE]typescriptreact:file="app/components/Confetti.tsx" "use client" import { useEffect, useState } from "react" import { motion } from "framer-motion" import { getRandomInt } from "@/lib/utils" interface ConfettiPiece { id: number x: number y: number size: number color: string rotation: number } export default function Confetti() { const [pieces, setPieces] = useState([]) useEffect(() => { // Generate confetti pieces const newPieces: ConfettiPiece[] = [] const colors = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"] for (let i = 0; i < 100; i++) { newPieces.push({ id: i, x: getRandomInt(0, 100), y: -20, size: getRandomInt(5, 15), color: colors[getRandomInt(0, colors.length - 1)], rotation: getRandomInt(0, 360), }) } setPieces(newPieces) // Clean up after animation const timer = setTimeout(() => { setPieces([]) }, 5000) return () => clearTimeout(timer) }, []) return (

{pieces.map((piece) => ( 0.5 ? "50%" : "0%", transform: `rotate(${piece.rotation}deg)`, }} animate={{ y: ["0%", "100%"], x: [`${piece.x}%`, `${piece.x + getRandomInt(-20, 20)}%`], rotate: [0, getRandomInt(180, 720)], opacity: [1, 0], }} transition={{ duration: getRandomInt(3, 6), ease: [0.1, 0.25, 0.3, 1], delay: Math.random() * 0.5, }} /> ))}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/components/TaskSphere.tsx" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import { Sun, Moon, Plus, Sparkles, Brain, Calendar, Clock, Mic, VolumeX, Award, Rocket } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Progress } from "@/components/ui/progress" import { useToast } from "@/components/ui/use-toast" import { Toaster } from "@/components/ui/toaster" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { cn, calculateTaskPosition, getTaskSuggestion, generateAchievement } from "@/lib/utils" import TaskCard from "./TaskCard" import EnergyMeter from "./EnergyMeter" import VoiceInput from "./VoiceInput" import TaskPlanet from "./TaskPlanet" import AchievementBadge from "./AchievementBadge" import Confetti from "./Confetti" // Define task zones based on energy levels const taskZones = [ { id: "low", name: "Low Energy", color: "bg-red-500", range: [0, 33] }, { id: "medium", name: "Medium Energy", color: "bg-yellow-500", range: [34, 66] }, { id: "high", name: "High Energy", color: "bg-green-500", range: [67, 100] }, ] // Define time blocks for the day const timeBlocks = [ { id: "morning", name: "Morning", icon: Sun, time: "6:00 AM - 12:00 PM" }, { id: "afternoon", name: "Afternoon", icon: Sun, time: "12:00 PM - 5:00 PM" }, { id: "evening", name: "Evening", icon: Moon, time: "5:00 PM - 10:00 PM" }, ] interface Task { id: string title: string completed: boolean energy: number timeBlock: string createdAt: Date position?: { x: number; y: number; z: number; angle: number } } export default function TaskSphere() { const [tasks, setTasks] = useState([]) const previousTasksRef = useRef(null) const [newTaskTitle, setNewTaskTitle] = useState("") const [userEnergy, setUserEnergy] = useState(75) const [selectedTimeBlock, setSelectedTimeBlock] = useState("morning") const [viewMode, setViewMode] = useState<"list" | "sphere">("sphere") const [darkMode, setDarkMode] = useState(true) const [showVoiceInput, setShowVoiceInput] = useState(false) const [showAchievement, setShowAchievement] = useState(false) const [currentAchievement, setCurrentAchievement] = useState(null) const [showConfetti, setShowConfetti] = useState(false) const [completedCount, setCompletedCount] = useState(0) const [streakCount, setStreakCount] = useState(0) const [lastCompletedDate, setLastCompletedDate] = useState(null) const { toast } = useToast() const sphereRef = useRef(null) // Load tasks and stats from localStorage on component mount useEffect(() => { const savedTasks = localStorage.getItem("tasksphere-tasks") const savedStats = localStorage.getItem("tasksphere-stats") if (savedTasks) { try { const parsedTasks = JSON.parse(savedTasks) // Convert string dates back to Date objects parsedTasks.forEach((task: any) => { task.createdAt = new Date(task.createdAt) }) setTasks(parsedTasks) } catch (e) { console.error("Error parsing tasks from localStorage", e) } } if (savedStats) { try { const stats = JSON.parse(savedStats) setCompletedCount(stats.completedCount || 0) setStreakCount(stats.streakCount || 0) setLastCompletedDate(stats.lastCompletedDate || null) } catch (e) { console.error("Error parsing stats from localStorage", e) } } }, []) // Save tasks and stats to localStorage whenever they change useEffect(() => { localStorage.setItem("tasksphere-tasks", JSON.stringify(tasks)) const stats = { completedCount, streakCount, lastCompletedDate, } localStorage.setItem("tasksphere-stats", JSON.stringify(stats)) }, [tasks, completedCount, streakCount, lastCompletedDate]) // Toggle dark mode useEffect(() => { if (darkMode) { document.documentElement.classList.remove("light") } else { document.documentElement.classList.add("light") } }, [darkMode]) // Calculate task positions for 3D sphere useEffect(() => { if (viewMode === "sphere") { // Only update positions if they don't already exist or if the number of tasks changed const needsPositionUpdate = tasks.some((task) => !task.position) || tasks.length !== previousTasksRef.current?.length if (needsPositionUpdate) { const tasksWithPositions = tasks.map((task, index) => { // Keep existing position if it exists if (task.position) return task const position = calculateTaskPosition(index, tasks.length, 150) return { ...task, position } }) // Use a functional update to avoid dependency on tasks setTasks((currentTasks) => { // Only update if the tasks have actually changed if (JSON.stringify(currentTasks) !== JSON.stringify(tasksWithPositions)) { return tasksWithPositions } return currentTasks }) } // Store current tasks length for comparison previousTasksRef.current = [...tasks] } }, [viewMode, tasks, tasks.length]) // Check for achievements when completed count changes useEffect(() => { const achievement = generateAchievement(completedCount) if (achievement) { // Check if this is a new achievement const lastAchievement = localStorage.getItem("tasksphere-last-achievement") if (lastAchievement !== achievement.title) { setCurrentAchievement(achievement) setShowAchievement(true) setShowConfetti(true) localStorage.setItem("tasksphere-last-achievement", achievement.title) setTimeout(() => { setShowConfetti(false) }, 5000) } } }, [completedCount]) // Update streak count useEffect(() => { const today = new Date().toDateString() if (lastCompletedDate) { const yesterday = new Date() yesterday.setDate(yesterday.getDate() - 1) const yesterdayString = yesterday.toDateString() if (today === lastCompletedDate) { // Already completed a task today, do nothing } else if (yesterdayString === lastCompletedDate) { // Completed a task yesterday, continue streak setLastCompletedDate(today) } else { // Streak broken setStreakCount(1) setLastCompletedDate(today) } } }, [completedCount, lastCompletedDate]) const addTask = (title = newTaskTitle) => { if (title.trim() === "") return const newTask: Task = { id: Date.now().toString(), title: title.trim(), completed: false, energy: userEnergy, timeBlock: selectedTimeBlock, createdAt: new Date(), } // If in sphere mode, calculate position if (viewMode === "sphere") { const position = calculateTaskPosition(tasks.length, tasks.length + 1, 150) newTask.position = position } setTasks((prevTasks) => [...prevTasks, newTask]) setNewTaskTitle("") toast({ title: "Task added to your sphere!", description: `"${title}" has been added to your ${timeBlocks.find((tb) => tb.id === selectedTimeBlock)?.name.toLowerCase()} tasks.`, }) } const toggleTask = (id: string) => { const taskIndex = tasks.findIndex((t) => t.id === id) if (taskIndex === -1) return const task = tasks[taskIndex] const wasCompleted = task.completed // Update the task using functional update setTasks((prevTasks) => { const updatedTasks = [...prevTasks] updatedTasks[taskIndex] = { ...updatedTasks[taskIndex], completed: !wasCompleted, } return updatedTasks }) // Update stats if (!wasCompleted) { // Task is being completed setCompletedCount((prev) => prev + 1) const today = new Date().toDateString() if (lastCompletedDate === today) { // Already completed a task today } else if (lastCompletedDate) { const yesterday = new Date() yesterday.setDate(yesterday.getDate() - 1) const yesterdayString = yesterday.toDateString() if (yesterdayString === lastCompletedDate) { // Completed a task yesterday, continue streak setStreakCount((prev) => prev + 1) } else { // Streak broken, start new streak setStreakCount(1) } } else { // First completed task ever setStreakCount(1) } setLastCompletedDate(today) // Show celebration toast({ title: "Task completed! 🎉", description: `Great job completing "${task.title}"!`, }) // Trigger confetti for task completion setShowConfetti(true) setTimeout(() => { setShowConfetti(false) }, 3000) } } const deleteTask = (id: string) => { const task = tasks.find((t) => t.id === id) if (task) { setTasks((prevTasks) => prevTasks.filter((t) => t.id !== id)) toast({ title: "Task removed", description: `"${task.title}" has been removed from your sphere.`, variant: "destructive", }) } } const handleVoiceInput = (text: string) => { if (text) { addTask(text) setShowVoiceInput(false) } } const getFilteredTasks = (timeBlock: string) => { return tasks.filter((task) => task.timeBlock === timeBlock) } const getTaskCountByTimeBlock = (timeBlock: string) => { return tasks.filter((task) => task.timeBlock === timeBlock).length } const getCompletedTaskCountByTimeBlock = (timeBlock: string) => { return tasks.filter((task) => task.timeBlock === timeBlock && task.completed).length } const getProgressByTimeBlock = (timeBlock: string) => { const total = getTaskCountByTimeBlock(timeBlock) const completed = getCompletedTaskCountByTimeBlock(timeBlock) return total > 0 ? (completed / total) * 100 : 0 } const energySuggestion = getTaskSuggestion(userEnergy) return (

{/* Achievement Modal */} {/* Confetti Effect */} {showConfetti && }

TaskSphere

{/* Stats Cards */}

Tasks Completed

{completedCount}

Current Streak

{streakCount} {streakCount === 1 ? "day" : "days"}

Completion Rate

{tasks.length > 0 ? Math.round((tasks.filter((t) => t.completed).length / tasks.length) * 100) : 0}%

Your Energy Level

AI Task Suggestions

{energySuggestion.message}

Add New Task

setNewTaskTitle(e.target.value)} placeholder="What do you need to accomplish?" className="bg-white/20 dark:bg-black/20 border-0" onKeyDown={(e) => e.key === "Enter" && addTask()} />

{/* Voice Input */} {showVoiceInput && ( )}

{/* Task Display - List or Sphere */} {viewMode === "list" ? (

{timeBlocks.map((timeBlock) => (

{timeBlock.name}

{timeBlock.time}

{getCompletedTaskCountByTimeBlock(timeBlock.id)} completed {getTaskCountByTimeBlock(timeBlock.id)} total

{getFilteredTasks(timeBlock.id).length > 0 ? (

))}

) : (

No tasks for {timeBlock.name.toLowerCase()}

)}

))}

) : (

{tasks.length > 0 ? (

{tasks.map((task) => ( ))}

) : (

Your Task Sphere is Empty

Add tasks to see them orbit in your personal productivity universe

)}

) } [V0_FILE]typescriptreact:file="app/components/VoiceInput.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Mic, StopCircle } from "lucide-react" import { Button } from "@/components/ui/button" interface VoiceInputProps { onResult: (text: string) => void } export default function VoiceInput({ onResult }: VoiceInputProps) { const [isListening, setIsListening] = useState(false) const [transcript, setTranscript] = useState("") const [recognition, setRecognition] = useState(null) useEffect(() => { if ((typeof window !== "undefined" && "SpeechRecognition" in window) || "webkitSpeechRecognition" in window) { // @ts-ignore const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition const recognitionInstance = new SpeechRecognition() recognitionInstance.continuous = true recognitionInstance.interimResults = true recognitionInstance.onresult = (event: any) => { let interimTranscript = "" let finalTranscript = "" for (let i = event.resultIndex; i < event.results.length; i++) { const transcript = event.results[i][0].transcript if (event.results[i].isFinal) { finalTranscript += transcript } else { interimTranscript += transcript } } setTranscript(finalTranscript || interimTranscript) } recognitionInstance.onerror = (event: any) => { console.error("Speech recognition error", event.error) setIsListening(false) } setRecognition(recognitionInstance) } // No need to include recognition in the dependency array // as we only want to set up the recognition once return () => { if (recognition) { try { recognition.stop() } catch (e) { console.error("Error stopping recognition", e) } } } }, [recognition]) const toggleListening = () => { if (!recognition) return if (isListening) { recognition.stop() if (transcript) { onResult(transcript) } } else { setTranscript("") recognition.start() } setIsListening(!isListening) } return (

Voice Input

{transcript ? (

{transcript}

) : (

{isListening ? "Listening... speak now" : "Click Start to begin voice input"}

)}

) } 7d:["$","$L85",null,{"chatId":"w51XD6kuvGb","children":["$","$L86",null,{"data":{"@\"active-block\",\"w51XD6kuvGb\",":{"id":"IxSEbmZFPj6","messageId":"TbNqXrekaxmQtW84sdRaBLe7mjr8nEtP","source":"$87","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"TaskManager","type":"code-project","project":"TaskManager"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"w51XD6kuvGb\",":false,"":null},"children":"$L88"}]}]

About

Tags

Share

About

Tags

Share

About

Tags

Share

More from bn-gomez

More Templates Like This